<!-- 从业者端-在线学习-题库列表-题库首页-->
<template>
  <view class="container">
    <!-- 题库信息卡片 -->
    <view class="bank-card">
      <view class="bank-title">{{ btkBaseInfo.btk_name }}</view>
      <view class="bank-meta">
        <text>共{{ btmSum }}道题 | 随机抽题</text>
        <!-- <text class="divider">|</text> -->
        <text>{{ btkBaseInfo.btk_zy }} | {{ btkBaseInfo.btk_zylevel }}</text>
      </view>
    </view>

    <!-- 题库描述 -->
    <view class="description-card">
      <text class="desc-text">
        {{ btkBaseInfo.btk_desc }}
      </text>
    </view>

    <!-- 分割线 -->
    <u-line color="#eee" margin="30rpx 0"></u-line>

    <!-- 开始做题按钮 -->
    <view class="start-btn">
      <u-button 
        type="default" 
        shape="circle" 
        @click="startPractice"
				:customStyle="customStylePay"
      >
        开始做题
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
	data() {
		return {
			customStylePay: {
				"backgroundColor": "#03B8CD",
				"color": "#ffffff"
			},
			btkBaseInfo:{} ,///存储题库基本信息
			btmSum:'',
			btkCode:'' ///题库code
		}
	},
	onLoad(options) {
		this.btkCode = options.bank
		
	},
	onShow() {
		// 查询题库明细
		this.getBtk();
		// 查询题目明细
		this.getBtkSum();

	},
  methods: {
		// 查询题库明细
		getBtk() {
			this.$u.api.querybtk({
				"btkcode": this.btkCode, //#题库code
			}).then(res => {
				this.btkBaseInfo = res.data.base_info
			})
		},
		// 查询题库下题目的数量
		getBtkSum() {
			this.$u.api.querybtkdetail({
				"btkcode": this.btkCode,
			}).then(res => {
				this.btmSum = res.data.tolcount
								console.log('题库首页：', res)					
			})			
		},

    startPractice() {
      uni.navigateTo({
        url: `/pages/Practitioner/question/doQuestion?btkCode=${this.btkCode}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  padding-bottom: 100rpx;
  background-color: #F1F7F7;
  min-height: 100vh;
}

.header {
  margin-bottom: 30rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.bank-card {
  // background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin: 60rpx 0 20rpx 0;
  // box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	text-align: center;	
	
  
  .bank-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 15rpx;
  }
  
  .bank-meta {
    display: flex;
		flex-direction: column;
    align-items: center;
    font-size: 26rpx;
    color: #666;
    
    .divider {
      margin: 0 10rpx;
      color: #ddd;
    }
  }
}

.description-card {
  // background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  // box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  
  .desc-text {
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;
  }
}

.start-btn {
  position: fixed;
  // bottom: 30rpx;
  left: 30rpx;
  right: 30rpx;
  
  /deep/ .u-btn {
		width: 314rpx;
    height: 88rpx;
    font-size: 34rpx;
  }
}
</style>